<template>
  <el-dialog
    v-model="visible"
    :title="!isShowProd ? '选择商品' : $t('prodList.lookOver')"
    :close-on-click-modal="false"
  >
    <el-table
      ref="prodTableRef"
      v-loading="dataListLoading"
      :data="dataList"
      header-cell-class-name="table-header"
      row-class-name="table-row"
      style="width: 100%; margin-bottom:20px;"
    >
      <el-table-column
        prop="prodName"
        :label="$t('discount.prodName')"
      />
      <el-table-column
        width="100"
        :label="$t('discount.commodityPictures')"
      >
        <template #default="scope">
          <prod-pic
            :height="'60px'"
            :width="'60px'"
            :pic="scope.row.pic"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="current"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
    />
    <template #footer>
      <div>
        <div
          class="default-btn primary-btn"
          @click="selectProd()"
        >
          {{ $t("remindPop.confirm") }}
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const emit = defineEmits(['refreshDiscountProds'])

const visible = ref(false)
const isShowProd = ref(0)
const discountId = ref(0)
const dataList = ref([])
const current = ref(1)
const pageSize = ref(10)
const totalPage = ref(0)
const dataListLoading = ref(false)
const dataListSelections = ref([])
const discountProds = ref(null)
const page = ref(null)

/**
 * 获取数据列表
 * @param id
 * @param prods
 */
const init = (id, prods) => {
  discountProds.value = prods
  discountId.value = id
  visible.value = true
  dataListLoading.value = true
  if (prods) {
    discountProds.value.forEach(row => {
      dataListSelections.value.push(row)
    })
  }
  showProd(discountId.value, 1)
}
const showProd = (id, val) => {
  if (discountId.value !== id) {
    current.value = 1
    pageSize.value = 10
  }
  isShowProd.value = val
  discountId.value = id
  visible.value = true
  http({
    url: http.adornUrl(`/platform/discountProd/info/${id}`),
    method: 'get',
    params: http.adornParams({
      current: current.value,
      size: pageSize.value,
      discountId: discountId.value
    })
  })
    .then(({ data }) => {
      dataList.value = data.records
      totalPage.value = data.total
      current.value = data.current
      page.value = data.pages
    })
}
defineExpose({ init, showProd })

/**
 * 每页数
 * @param val
 */
const sizeChangeHandle = (val) => {
  pageSize.value = val
  showProd(discountId.value, 1)
}

/**
 * 当前页
 * @param val
 */
const currentChangeHandle = (val) => {
  current.value = val
  showProd(discountId.value, 1)
}

/**
 * 选择产品
 */
const selectProd = () => {
  const prods = []
  dataListSelections.value.forEach(item => {
    const prodIndex = prods.findIndex(prod => prod.prodId === item.prodId)
    if (prodIndex === -1) {
      prods.push({
        discountProdId: 0,
        prodId: item.prodId,
        prodName: item.prodName,
        pic: item.pic
      })
    }
  })
  emit('refreshDiscountProds', prods)
  dataListSelections.value = []
  visible.value = false
}
</script>
